<template>
  <div class="switch-tpl" :style="`transform: rotate(${heng ? -90 : 0}deg)`">
    <el-image v-if="data == inactive" src="/img/cell/onoff.png"></el-image>
    <el-image
      v-else-if="data == active"
      src="/img/cell/onoff_active.png"
    ></el-image>
    <el-image
      v-else-if="data == error"
      src="/img/cell/onoff_error.png"
    ></el-image>
    <el-image v-else src="/img/cell/onoff.png"></el-image>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default: "0",
    },
    heng: {
      type: Boolean,
      default: false,
    },
    active: {
      default: "1",
    },
    inactive: {
      default: "0",
    },
    error: {
      default: "2",
    },
  },
};
</script>

<style scoped lang="scss">
.switch-tpl {
  width: 100%;
  height: 100%;
  ::v-deep .el-image {
    width: calc((28 / 50) * 100%) !important;
    margin-left: 3px;
  }
}
</style>
